{% extends "trees/base.html" %}
{% block title %}Add Tree - JM3{% endblock %}
{% block extra_head %}
<style>.wizard-step[hidden]{display:none;}</style>
<script>
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(() => {}, () => {}, {enableHighAccuracy: true, timeout: 3000});
  }
</script>
{% endblock %}
{% block content %}
<div class="col-12 col-md-6 mx-auto">
  <p class="mb-1 mt-2"><a href="{% url 'dashboard' %}" class="text-muted text-decoration-none">&larr; Cancel</a></p>
  <h3 class="mb-2">🌳 Add Tree</h3>
  <div class="progress mb-4" style="height:6px;"><div class="progress-bar bg-jm3" id="wprog" style="width:20%"></div></div>

  <form method="post" id="treeForm">
    {% csrf_token %}

    <!-- STEP 1: Location -->
    <div class="wizard-step">
      <h5 class="fw-bold">Where is the tree?</h5>
      <div class="my-3 p-3 rounded" id="locBox" style="background:#fff8e1;">
        <span id="locMsg">📍 Enable location access for JM3 to work.</span>
        {{ form.latitude }}{{ form.longitude }}
      </div>
      <button type="button" class="btn btn-jm3 btn-lg w-100 nextBtn" disabled>Continue</button>
    </div>

    <!-- STEP 2: Photo -->
    <div class="wizard-step" hidden>
      <h5 class="fw-bold">Take a photo</h5>
      <p class="text-muted small">Live capture only — the photo is the tree&#39;s evidence.</p>
      {% include "trees/_camera.html" with autostart='false' %}
      <div class="d-flex gap-2 mt-2">
        <button type="button" class="btn btn-light backBtn">Back</button>
        <button type="button" class="btn btn-jm3 flex-grow-1 nextBtn" disabled>Continue</button>
      </div>
    </div>

    <!-- STEP 3: Species -->
    <div class="wizard-step" hidden>
      <h5 class="fw-bold">What species is it?</h5>
      <input type="text" id="speciesSearch" class="form-control mb-2" placeholder="🔍 Search species…">
      {{ form.species }}
      <div class="d-flex gap-2 mt-3">
        <button type="button" class="btn btn-light backBtn">Back</button>
        <button type="button" class="btn btn-jm3 flex-grow-1 nextBtn" disabled>Continue</button>
      </div>
    </div>

    <!-- STEP 4: Name -->
    <div class="wizard-step" hidden>
      <h5 class="fw-bold">Give it a name</h5>
      <p class="text-muted small">Optional — something you&#39;ll recognise, like &ldquo;Gate Tree&rdquo;. Left blank, JM3 names it for you.</p>
      {{ form.name }}
      <div class="d-flex gap-2 mt-3">
        <button type="button" class="btn btn-light backBtn">Back</button>
        <button type="button" class="btn btn-jm3 flex-grow-1 nextBtn">Continue</button>
      </div>
    </div>

    <!-- STEP 5: More details -->
    <div class="wizard-step" hidden>
      <h5 class="fw-bold">More details</h5>
      <p class="text-muted small">All optional — you can skip and save.</p>
      <div class="mb-2"><label class="form-label">Height (cm)</label>
        <input type="number" step="0.1" name="height_cm" class="form-control"></div>
      <div class="mb-2"><label class="form-label">Nursery</label>{{ form.source_nursery }}</div>
      <div class="mb-3"><label class="form-label">Planted date</label>{{ form.planted_date }}</div>
      <div class="d-flex gap-2">
        <button type="button" class="btn btn-light backBtn">Back</button>
        <button type="submit" class="btn btn-jm3 flex-grow-1">Save Tree</button>
      </div>
    </div>

    {{ form.non_field_errors }}
  </form>
</div>
{% endblock %}
{% block extra_js %}
<script>
  const steps = [...document.querySelectorAll('.wizard-step')];
  const prog = document.getElementById('wprog');
  let idx = 0, photoReady = false, gpsReady = false, fallMap = null;
  const lat = document.getElementById('id_latitude');
  const lng = document.getElementById('id_longitude');
  const species = document.getElementById('id_species');

  function gate() {
    // Enable the current step's Continue button only when that step is satisfied.
    const btn = steps[idx].querySelector('.nextBtn');
    if (!btn) return;
    if (idx === 0) btn.disabled = !gpsReady;
    else if (idx === 1) btn.disabled = !photoReady;
    else if (idx === 2) btn.disabled = !species.value;
    else btn.disabled = false;
  }
  let cameraStarted = false;
  function show(i) {
    steps.forEach((s, j) => s.hidden = j !== i);
    idx = i; prog.style.width = ((i + 1) / steps.length * 100) + '%';
    if (i === 1 && !cameraStarted) {   // open camera only when reaching the photo step
      cameraStarted = true;
      document.querySelector('[data-camera]').dispatchEvent(new CustomEvent('jm3:start'));
    }
    gate();
  }
  document.querySelectorAll('.nextBtn').forEach(b => b.addEventListener('click', () => show(idx + 1)));
  document.querySelectorAll('.backBtn').forEach(b => b.addEventListener('click', () => show(idx - 1)));

  // Photo state from the camera widget
  document.addEventListener('jm3:capture', () => { photoReady = true; gate(); });
  document.addEventListener('jm3:retake', () => { photoReady = false; gate(); });

  // Location — captured silently, never shown as numbers
  const locMsg = document.getElementById('locMsg'), locBox = document.getElementById('locBox');
  function setGps(la, lo) {
    lat.value = la.toFixed(6); lng.value = lo.toFixed(6);
    gpsReady = true; locBox.style.background = '#e8f5e9';
    locMsg.textContent = '📍 Location captured ✓'; gate();
  }
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      p => setGps(p.coords.latitude, p.coords.longitude),
      () => { locMsg.textContent = ‘📍 Enable location access for JM3 to work.’; });
  } else { locMsg.textContent = ‘📍 Location access not available on this device.’; }

  // Searchable species
  const search = document.getElementById('speciesSearch');
  const opts = [...species.options].map(o => ({ value: o.value, text: o.text }));
  search.addEventListener('input', () => {
    const q = search.value.toLowerCase(); species.innerHTML = '';
    opts.filter(o => o.text.toLowerCase().includes(q)).forEach(o => {
      const el = document.createElement('option'); el.value = o.value; el.text = o.text; species.add(el); });
    gate();
  });
  species.addEventListener('change', gate);

  // The shared camera widget should not manage any submit button here.
  document.querySelector('[data-camera]').dataset.required = 'false';
  show(0);
</script>
{% endblock %}
{% block extra_js_end %}{% endblock %}